require('./PageAddgradecontent.styl');
import { Boxs, NavBar, Group, TextareaField, Dialog, TextField, Toast } from 'saltui';
import { Control } from 'react-keeper';
const classNames = require("classnames")
const { HBox, Box, VBox } = Boxs;
const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const Uploadimg = require('components/uploadimg')
const numberRegExp = /^(\d+\.\d*)|(\d+\.)|\d+/;
const ScoreBac = require('images/svg/scoreBac.svg');
class Addgradecontent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            urlList: [],//图片列表
            remark: '',//备注
            itemList: [],//打分列表
            placeName: '',
            className: '',
            scoreId: '',//''表示新增
            content: '',
            showNoPadding: false,
            wordcount: 0,//备注内容字计算
            itemList: [],
            number: '',
        };
        this.handleOnLeftClick = this.handleOnLeftClick.bind(this)
        this.handleOnRightClick = this.handleOnRightClick.bind(this);
        this.handleClickDel = this.handleClickDel.bind(this);
        this.id = '';
    }
    handleOnLeftClick() {
        Control.go("/home/addgrade/" + "original")
    }
    //右侧导航按钮
    handleOnRightClick() {
        for (let item of this.state.itemList) {
            if (!item.itemScore) {
                Toast.show({
                    duration:1000,
                    content: `请完成全部打分`
                });
                return;
            }
        }
        let { placeId, timeId, typeId } = { ...Control.state }
        let arr = [];
        let content = {};
        for (let item of this.state.itemList) {
            content.itemSCore = item.itemScore;
            content.itemId = item.itemId;
            arr.push(content);
            content = {};
        }
        let obj = {};
        obj.scoreId = this.state.scoreId;//''新增
        obj.placeId = placeId;
        obj.timeId = timeId;
        obj.typeId = typeId;
        obj.data = JSON.stringify({ "itemList": arr });
        obj.remark = this.state.content;
        //图片
        let formData = this.refs.uploadimg.formData;
        obj.formData = formData;
        let urlList = this.refs.uploadimg.state.urlList;
        obj.urlList = urlList;
        obj.delscoreImgIds = this.refs.uploadimg.delscoreImgIds.join(';');
        if (!obj.formData) {
            obj.formData = new FormData(this.refs.uploadimg.refs.imageForm);
        }
        //所有显示的图片数量与服务器图片数量
        if (urlList.length == this.state.urlList.length) {
            obj.noimg = true;
        }
        Actions.submit(obj);
    }
    handleNumberChange(newValue) {
        this.setState({
            number: newValue,
        });
    }
    numberFilter(originValue) {
        const matches = originValue.match(numberRegExp);
        let number = '';
        if (matches) {
            number = matches[0];
        } else {
            Dialog.alert({
                title: '提示',
                content: '必须数字',
                onConfirm() {
                },
            });
        }
        return number;
    }
    handleTextChange(name, newValue) {
        if (name == 'content' && (this.state.wordcount + newValue.length > 200)) {
            Toast.show({
                duration:1000,
                content: `字数已达上限`
            });
            return;
        }
        this.setState({
            [name]: newValue,
        }, () => {
            if (name == 'content') {
                this.setState({ wordcount: this.state.content.length })
            }
        });
    }
    //备注内容删除
    handleClickDel() {
        this.setState({ wordcount: 0, content: '' })
    }
    handleShow(stateProps, show, id = undefined) {

        //显示输入框时id有值,点击确定时没有
        if (id) {
            this.id = id;
        }
        this.setState({
            [stateProps]: show,
        }, () => {
            if (this.state.showNoPadding) {
                if (this.state.number)
                    this.setState({ number: '' })
            } else {
                if (this.id) {
                    let itemList = this.state.itemList;
                    if (parseFloat(itemList[this.id].fullMark) < parseFloat(this.state.number)) {
                        Toast.show({
                            type: 'error',
                            content: `必须小于${itemList[this.id].fullMark}`
                        });
                        return;
                    }
                    itemList[this.id].itemScore = this.state.number;
                    this.id = '';
                    this.setState({ itemList })
                }
            }
        });
    }
    render() {
        let t = this;
        return (
            <div className="addgradecontent">
                <NavBar
                    className={classNames("my-navbar", { "ios-nav-bar": window.isIphone })}
                    isShow={false}
                    title="打分"
                    onLeftClick={this.handleOnLeftClick}
                    onRightClick={this.handleOnRightClick}
                    rightText='提交'
                />
                <div className="addgradecontent-content">
                    <HBox className="t-LH40 addgradecontent-content-box t-PL10 t-PR10">
                        <Box flex={1}>区域名称</Box>
                        <Box flex={1} className="t-FAR">{this.state.placeName}</Box>
                    </HBox>
                    <HBox className="t-LH40 addgradecontent-content-box t-PL10 t-PR10">
                        <Box flex={1}>负责单位</Box>
                        <Box flex={1} className="t-FAR">{this.state.className}</Box>
                    </HBox>
                    <Group>
                        <Group.Head className="t-LH40 title t-PL10" >请输入检查分数</Group.Head>
                        <Group.List>
                            {this.state.itemList.map((item, index) => {
                                return (<HBox key={`addgradecontent-content${index}`} className="t-LH40 t-PL10 t-PR10" vAlign="center" onClick={this.handleShow.bind(this, 'showNoPadding', true, `${index}`)}>
                                    <Box flex={1}>{item.itemName}&nbsp;&nbsp;{`(${item.fullMark})`}</Box>
                                    <Box flex={1} className={classNames("t-FAR", { "color": !item.itemScore })}>{item.itemScore || "未打分"}</Box>
                                </HBox>)
                            })}
                        </Group.List>
                    </Group>
                    <Uploadimg
                        ref="uploadimg"
                        canDel
                        urlList={this.state.urlList}
                        notitle
                    />
                    <Group.List className="t-MT10 addgradecontent-comments">
                        <TextareaField
                            layout="h"
                            label=""
                            minRows={3}
                            maxRows={5}
                            placeholder="请输入备注"
                            value={t.state.content}
                            tip={<div className="word-color">{t.state.activeRead && t.state.content.length > 0 ? <ToastError name="toast-error" fill="#fc3d39" onClick={t.handleClickDel} /> : null}<span>{this.state.wordcount}</span>/100字</div>}
                            onChange={t.handleTextChange.bind(t, 'content')}
                        />
                    </Group.List>
                    <Dialog
                        key="d-no-padding"
                        show={this.state.showNoPadding}
                        type="confirm"
                        onConfirm={() => { this.handleShow('showNoPadding', false); }}
                        onCancel={() => { this.handleShow('showNoPadding', false); }}
                    >
                        <ScoreBac width="100%" height="100%" />
                        <TextField
                            label=""
                            placeholder="请输入卫生检查分数"
                            filter={value => t.numberFilter(value)}
                            value={t.state.number}
                            tip=""
                            onChange={(value) => { t.handleNumberChange(value); }}
                            className="my-text-field"
                        />
                    </Dialog>
                </div>
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        Actions.fetch({ ...Control.state })
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Addgradecontent, Reflux.connect(Store));

module.exports = Addgradecontent;
